<template>
  <div>
    <h1>news</h1>
    <h1>store: {{ title }}</h1>
    <h1>changeCount: {{ changeCount }}</h1>
    <h1>count: {{ count }}</h1>
    <button @click="change">change</button>
    <ul>
      <li v-for="v in lists">{{ v.product_name }}</li>
    </ul>
  </div>
</template>

<script setup>
import { userStore } from "@/store/user";
import { storeToRefs } from "pinia";
import { listStore } from "@/store/list";

const $userStore = userStore();
const $listStore = listStore();
const { lists } = storeToRefs($listStore);
// 不能直接解构，需要使用storeToRefs进行解构
const { title, changeCount, count } = storeToRefs($userStore);
const change = () => {
  // 通过store操作
  // $userStore.count++;
  // 通过storeToRefs进行操作
  // count.value++;
  // 通过$patch进行操作
  // $userStore.$patch((state) => {
  //   state.title = "title";
  // });
  // 通过actions进行操作
  // $userStore.addCount(10);
  $listStore.getData().then((res) => {
    console.log(res);
  });
};
</script>

<style scoped></style>
